<!doctype html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<title>车来了</title>
		<meta name="description" content="最精准的实时公交App">
		<meta name="apple-mobile-web-app-title" content="车来了">

		<!--顺序不可以变，要不360的不使用极速的内核-->
		<meta name="renderer" content="webkit">
		<meta name="force-rendering" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<meta name="HandheldFriendly" content="True">
		<meta name="MobileOptimized" content="320">
		<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,minimal-ui">

		<!-- uc强制竖屏 -->
		<meta name="screen-orientation" content="portrait">
		<!-- QQ强制竖屏 -->
		<meta name="x5-orientation" content="portrait">

		<!--下面两个不能合并写，要不浏览器就都不支持了-->
		<meta name="format-detection" content="telephone=no;">
		<meta name="format-detection" content="address=no;email=no;">

		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="white">
		<meta name="mobile-web-app-capable" content="yes">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="cleartype" content="on">

		<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

		<!-- build:css({.tmp,0112wastsons}) styles/style.css -->
		<link type="text/css" rel="stylesheet" href="css/css.css" />
		<!-- endbuild -->

		<script>
			var isIOS = /iP(ad|hone|od)/.test(navigator.userAgent);
			if(isIOS) {
				var scale = 1 / window.devicePixelRatio;
				document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
				document.documentElement.style.fontSize = document.documentElement.clientHeight / 10 + 'px';
			}
		</script>

	</head>

	<body>
		
		<div class="box">
			<!--规则-->
			<div class="box_rule" onclick="ruleShow('cover_rule')">规则</div>
			
			
			<!--中间部分-->
			<div class="box_middle">
				
				
				<!--活动头-->
				<div class="box_header"></div>
				
				<!--活动主要部分-->
				<div id="main" class="main">
					<!--隔条-->
					<div id="main_door" class="main_door"></div>
					<!--四个-->
					<ul id="main_card" class="main_card">
						<li>
							<p class="hide" style="float: right; margin: 52% 2%;">
								<span id="nan" class="main_card_num">1</span>张
							</p>
						</li>
						<li>
							<p class="hide" style="margin-top: 52%;">
								<span id="gua" class="main_card_num">1</span>张
							</p>
						</li>
						<li>
							<p class="hide" style="float: right; margin-right: 2%;">
								<span id="gong" class="main_card_num">1</span>张
							</p>
						</li>
						<li>
							<p class="hide">
								<span id="che" class="main_card_num">1</span>张
							</p>
						</li>
					</ul>
				</div>
				
				<!--摇一摇-->
				<div class="main_action">
					<div class="main_action_share"></div>
					<div id="main_action_rock" class="main_action_rock" onclick="rock()">摇一下</div>
					<div id="main_action_git" class="main_action_rock none" onclick="ruleShow('cover_phone');">点击领取</div>
					<div class="main_article_packet"></div>
					
				</div>
				
				<div id="main_chance" class="main_chance">您今日还有<span id="main_chance_num" class="main_chance_num">10</span>次机会</div>
				<!--底部------------------------------------>
				
				<div style="width: 100px;height: 50px;background: red;font-size: 20px;margin-top: 30px;" onclick="clearStorage()">清楚缓存</div>
			</div>
			<!--中间部分结束-->
			
			<!--弹出的元素-->
			<div id="cover_rule" class="cover hide">
				<!--活动规则-->
				<div id="cover_rule" class="cover_rule">
					<h1>活动规则</h1>
					<!--规则说明-->
					<ul class="cover_rule_ul">
						<li style="list-style-image: url(images/supernatant_number1.png);">点击“摇一摇”或摇晃手机，每次可获得一张拼图， 集齐4张拼图，即可点亮“南瓜公车”。</li>
						<li style="list-style-image: url(images/supernatant_number2.png);">活动时间:10月30号-10月31号，每个账号每天最多 “摇”10次，每次会获得一张卡片。</li>
						<li style="list-style-image: url(images/supernatant_number3.png);">红包获取方式:发送支付宝口令到手机号，获得口令后，请复制并登录支付宝“红包”输入口令获取。</li>
					</ul>
					<!--规则注释-->	
					<p class="cover_rule_annota">注: 您的红包口令将在活动结束后的第一个工作日内通过短信发送到您的手机上，2小时有效。</p>
					<!--我知道了-->
					<div class="cover_rule_know" onclick="ruleShow('cover_rule')">我知道了</div>
				</div>
			</div>
			
			<!--弹出的抽卡元素-->
			<div id="cover_surprise" class="cover hide">
				<div class="cover_surprise">
					<!--卡片-->
					<img id="cover_surprise_card" class="cover_surprise_card" src="images/supernatant_card1.png" />
					<p>恭喜你</p>
					<p>获得一张卡片</p>
					<div class="cover_surprise_good cover_rule_know" onclick="good()">太棒了</div>
					
				</div>
				<!--糖果背景图片-->
				<div class="coverB"></div>
			</div>
			
			<!--请输入手机号-->
			<div id="cover_phone" class="cover hide">
				<div class="cover_phone">
					<p>请输入手机号<br />查看红包口令</p>
					
					<input id="phone" type="text" placeholder="请输入手机号" class="cover_phone_inp" />
					
					<div id="cover_rule_know" class="cover_rule_know">确定</div>
					<span id="cover_phone_f" class="cover_phone_format hide">*手机号码格式不正确</span>
					
				</div>
			</div>
			
			<!--领取成功提示-->
			<div id="cover_hint" class="cover hide">
				<div class="cover_hint">
					<p>您的红包口令将在活动结束后的第一个工作日内通过短信发送到您<span id="cover_hint_num">136****9999</span>的手机上，红包口令2小时内有效，请注意查收。</p>
					<div class="cover_rule_know" onclick="ruleShow('cover_hint')">知道了</div>
				</div>
			</div>
			
		</div>
		
	</body>
	<script type="text/javascript" src="js/js.js" ></script>
</html>
